<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试词汇 - 英语单词本</title>
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/vocabulary-test.css">
</head>
<body>
  <!-- 导航栏 -->
    <nav class="navbar">
      <!-- Logo区域 -->
      <div class="navbar-left">
        <a href="../index.html" class="navbar-brand">
          <img src="../img/logo.png" alt="Logo" class="logo">
          <div class="brand-text">
            <span class="brand-name">獭米英语单词本</span>
            <span class="brand-slogan">Tami English Vocabulary Book</span>
          </div>
        </a>
      </div>
      
      <!-- 导航链接区域 -->
      <div class="navbar-center">
        <div class="navbar-nav">
          <a href="../index.html" class="nav-link">单词列表</a>
          <a href="phrases-list.html" class="nav-link" data-page="phrases-list">短语列表</a>
          <a href="vocabulary-test.html" class="nav-link active" data-page="vocabulary-test">测试词汇</a>
          <a href="update-log.html" class="nav-link" data-page="update-log">更新日志</a>
        </div>
      </div>
      
      <!-- 用户区域 -->
       <div class="navbar-right">
         <div class="nav-user" id="nav-user">
           <a href="account.html" class="nav-link" id="nav-login">登录</a>
           <div class="user-dropdown" id="user-dropdown" style="display: none;">
             <div class="user-info">
               <img src="../img/default-avatar.png" alt="头像" class="user-avatar" id="nav-user-avatar">
               <span class="nav-username" id="nav-username">用户名</span>
             </div>
             <div class="dropdown-menu" id="dropdown-menu">
               <a href="user.html" class="dropdown-item">个人中心</a>
               <button class="dropdown-item logout-btn" id="logout-btn">退出登录</button>
             </div>
           </div>
         </div>
       </div>
    </nav>
  
  <div class="test-container">
    <!-- Tab Bar -->
    <div class="tab-bar">
      <button class="tab-btn active" data-tab="random">随机测试</button>
      <button class="tab-btn" data-tab="unmemorized">未记住的</button>
      <button class="tab-btn" data-tab="memorized">已记住的</button>
      <button class="tab-btn" data-tab="fill-blank">选择填空</button>
    </div>
    
    <!-- 统计信息 -->
    <div class="stats-card">
      <div class="stats-left">
        <div class="stats-text" id="stats-text">准备开始测试...</div>
        <div class="timer-text" id="timer-text">测试用时：00:00:00</div>
      </div>
      <div class="stats-right">
        <div class="word-count-selector">
          <label for="word-count-select">测试数量：</label>
          <select id="word-count-select" class="word-count-select">
            <option value="10">10个</option>
            <option value="20" selected>20个</option>
            <option value="30">30个</option>
            <option value="40">40个</option>
            <option value="50">50个</option>
            <option value="60">60个</option>
            <option value="70">70个</option>
            <option value="80">80个</option>
            <option value="90">90个</option>
            <option value="100">100个</option>
            <option value="all">全部单词</option>
          </select>
        </div>
        <button class="reset-btn" id="reset-btn">重新测试</button>
      </div>
    </div>
    
    <!-- 提示消息 -->
    <div id="word-count-message" class="word-count-message hidden"></div>
    
    <!-- 随机测试 Tab -->
    <div class="tab-content active" id="random-tab">
      <div class="test-card">
        <div class="word-display" id="random-word">点击开始测试</div>
        <div class="options-container" id="random-options">
          <!-- 选项将通过JavaScript动态生成 -->
        </div>
        <div class="navigation-btns">
          <button class="nav-btn" id="random-prev">上一个</button>
          <button class="nav-btn" id="random-next">下一个</button>
        </div>
      </div>
    </div>
    
    <!-- 未记住的 Tab -->
    <div class="tab-content" id="unmemorized-tab">
      <div class="test-card">
        <div class="word-display" id="unmemorized-word">点击开始测试</div>
        <div class="options-container" id="unmemorized-options">
          <!-- 选项将通过JavaScript动态生成 -->
        </div>
        <div class="navigation-btns">
          <button class="nav-btn" id="unmemorized-prev">上一个</button>
          <button class="nav-btn" id="unmemorized-next">下一个</button>
        </div>
      </div>
    </div>
    
    <!-- 已记住的 Tab -->
    <div class="tab-content" id="memorized-tab">
      <div class="test-card">
        <div class="word-display" id="memorized-word">点击开始测试</div>
        <div class="options-container" id="memorized-options">
          <!-- 选项将通过JavaScript动态生成 -->
        </div>
        <div class="navigation-btns">
          <button class="nav-btn" id="memorized-prev">上一个</button>
          <button class="nav-btn" id="memorized-next">下一个</button>
        </div>
      </div>
    </div>
    
    <!-- 选择填空 Tab -->
    <div class="tab-content" id="fill-blank-tab">
      <div class="test-card">
        <div class="word-display" id="fill-blank-word">点击开始测试</div>
        <div class="options-container" id="fill-blank-options">
          <!-- 选项将通过JavaScript动态生成 -->
        </div>
        <div class="navigation-btns">
          <button class="nav-btn" id="fill-blank-prev">上一个</button>
          <button class="nav-btn" id="fill-blank-next">下一个</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 结果统计模态框 -->
  <div class="results-modal" id="results-modal">
    <div class="results-content">
      <div class="results-title">测试完成！</div>
      <div class="results-stats">
        <div class="stat-item">
          <div class="stat-value" id="correct-count">0</div>
          <div class="stat-label">正确个数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="incorrect-count">0</div>
          <div class="stat-label">错误个数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="accuracy-rate">0%</div>
          <div class="stat-label">正确率</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="test-duration">00:00:00</div>
          <div class="stat-label">测试耗时</div>
        </div>
      </div>
      <div>
        <button class="results-btn" id="restart-test">重新测试</button>
        <button class="results-btn" id="close-results">关闭</button>
      </div>
    </div>
  </div>

  <!-- 页脚将通过common.js动态生成 -->

  <script src="../js/common.js"></script>
  <script src="../js/plugins.js"></script>
  <script src="../js/api-client.js"></script>
  <script src="../js/vocabulary-test.js"></script>
</body>
</html>